﻿<!DOCTYPE>

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE;IE=11;IE=8,chrome=1" />
    <title>特殊尺寸录入</title>
    <link href="/InSiteWebApplication/Content/Easyui/themes/metro/easyui.css" rel="stylesheet" />
    <!--<link href="/InSiteWebApplication/Content/Easyui/custom-easyui.css" rel="stylesheet" />-->
    <link href="/InSiteWebApplication/Content/Easyui/themes/icon.css" rel="stylesheet" />
    <link href="/InSiteWebApplication/Content/Easyui/themes/color.css" rel="stylesheet" />
   <!--[if lt IE 9]> 
        <script src="/InSiteWebApplication/Scripts/html5/html5shiv.js" type="text/javascript"></script>   
   <![endif]-->
    <style type="text/css">
        input{margin:0px}
        fieldset{margin:0px;padding:5px}
    </style>
</head>
<body>
    <div class="panelSection">    
        <div class="easyui-panel " title="尺寸录入区域" style="padding:3px;width: 100%" 
        data-options="closable:false,collapsible:true,minimizable:false,maximizable:false"> 
        
            <button id="btnInserImg" class="easyui-linkbutton c1" >插入图片</button>
             <button id="btnVCursor" class="easyui-linkbutton c1" >显示光标</button>

            <div>
                <label style="display:inline-block;width:70px;text-align:right">尺寸公差：</label>
                <button id="btnZF" class="easyui-linkbutton" data-options="width:40">±</button>
                <button id="btnZJ" class="easyui-linkbutton" data-options="width:40">Φ</button>
                <button id="btnR" class="easyui-linkbutton" data-options="width:40">R</button>
                <button id="btnSR" class="easyui-linkbutton" data-options="width:40">SR</button>
                <button id="btnM" class="easyui-linkbutton" data-options="width:40">M</button>
            </div>

            <div style ="margin:5px 0">
                <label style="display:inline-block;width:70px;text-align:right">粗糙度：</label>
                <button id="btnRoughness0" title="去除材料" class="easyui-linkbutton" style="background-size:50px 50px;background-image:url('')" 
                data-options="width:50,height:51"></button>
                <button id="btnRoughness1" title="指定加工方法" class="easyui-linkbutton" style="background-size:60px 50px;background-image:url('')"
                data-options="width:60,height:51"></button>
                <button id="btnRoughness2" title="不去除材料" class="easyui-linkbutton" style="background-size:50px 50px;background-image:url('')" 
                data-options="width:50,height:51"></button>

            </div> 
            <div id="dvSymBol" style ="margin:5px 0">
                 <label style="display:inline-block;width:70px;text-align:right">特殊符号：</label>
                  <button id="btnSymBolZJ" class="easyui-linkbutton" data-options="width:40">Φ</button>
                  <button id="Button1" class="easyui-linkbutton" data-options="width:40">▽</button>
                  <button id="Button2" class="easyui-linkbutton" data-options="width:40">×</button>
                  <button id="Button3" class="easyui-linkbutton" data-options="width:40">±</button>
                  <button id="Button4" class="easyui-linkbutton" data-options="width:40">°</button>
                  <button id="Button5" class="easyui-linkbutton" data-options="width:40">δ</button>
                  <button id="Button6" class="easyui-linkbutton" data-options="width:40">~</button>
                  <button id="Button7" class="easyui-linkbutton" data-options="width:40">①</button>
                  <button id="Button8" class="easyui-linkbutton" data-options="width:40">②</button>
                  <button id="Button9" class="easyui-linkbutton" data-options="width:40">③</button>
                  <button id="Button10" class="easyui-linkbutton" data-options="width:40">④</button>
                  <button id="Button11" class="easyui-linkbutton" data-options="width:40">⑤</button>
                  <button id="Button12" class="easyui-linkbutton" data-options="width:40">⑥</button>

                  
                  <button id="Button13" class="easyui-linkbutton" data-options="width:40">Ⅰ</button>
                  <button id="Button14" class="easyui-linkbutton" data-options="width:40">Ⅱ</button>
                  <button id="Button15" class="easyui-linkbutton" data-options="width:40">Ⅲ</button>
                  <button id="Button16" class="easyui-linkbutton" data-options="width:40">Ⅳ</button>
                  <button id="Button17" class="easyui-linkbutton" data-options="width:40">Ⅴ</button>
                  <button id="Button18" class="easyui-linkbutton" data-options="width:40">℃</button>
            </div> 

            <div id="dvShapeTolerance" style ="margin:5px 0">
                <label style="display:inline-block;width:70px;text-align:right">形位公差：</label>
                <button id="Button19" title="位置度" class="easyui-linkbutton" style=""
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button20" title="同轴度" class="easyui-linkbutton" style="padding-top:4px"
                    data-options="width:40,height:30"><span class="btnOfText" style="font-size:40px;color:black" >◎</span></button>

                <button id="Button21" title="对称度" class="easyui-linkbutton" style=""
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button22" title="平行度" class="easyui-linkbutton" style=""                   
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button23" title="垂直度" class="easyui-linkbutton" style=""
                    data-options="width:40,height:30"><span class="btnOfText" style="font-size:30px;color:black" >⊥</span></button>
                <button id="Button24" title="倾斜度" class="easyui-linkbutton" style=""
                    data-options="width:40,height:30"><span class="btnOfText" style="font-size:30px;color:black" >∠</span></button>
                <button id="Button25" title="圆柱度" class="easyui-linkbutton" style=""                   
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button26" title="平面度" class="easyui-linkbutton" style=""                   
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button27" title="圆度" class="easyui-linkbutton" style=""
                    data-options="width:40,height:30"><span class="btnOfText" style="font-size:40px;color:black" >○</span></button>
                <button id="Button28" title="直线度" class="easyui-linkbutton" style=""
                    data-options="width:40,height:30"><span class="btnOfText" style="font-size:20px;color:black" >—</span></button>
                <button id="Button29" title="面轮廓" class="easyui-linkbutton" style=""                   
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button30" title="线轮廓" class="easyui-linkbutton" style=""                   
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button32" title="圆跳动" class="easyui-linkbutton" style=""                   
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button31" title="全跳动" class="easyui-linkbutton" style=""                   
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>
            </div> 

            <div id="dvEditText" contenteditable="true" style="height:100px;border:1px solid #000">
                这是可编辑的
            </div>


               

        </div> 

    </div> 
    <div id="dgTolerance" style="display:none" >
        <div style="position:relative;font-size:20px;margin:3px 0 0 3px"> 
                       
            <div id="dg-toleranceBase" style="float:left;margin-top:10px;font-size:100%" >            
                <span></span>
                <input type="number" title="基准值" placeholder="基准值" style="width:65px" />                            
            </div>
            <div style="float:left;margin-left:5px" >
                <div id="dg-toleranceUp" style="font-size:50%;margin-left:0px;">
                    
                    <label style="width:25px;height:13px;line-height:13px;display:inline-block;overflow:hidden;">
                        <input style="float:left;" name="toleranceUpRadio" type="radio" value="+" />
                        <span style="float:left;">+</span>
                    </label>
                    
                    <label style="width:23px;height:13px;line-height:13px;display:inline-block;overflow:hidden;">
                        <input style="float:left;" name="toleranceUpRadio" type="radio" value="-" />
                        <span style="float:left">-</span>
                    </label>


                    <input name="upValue" type="number" title="上差" placeholder="上差" style="width:60px" />

                </div>
                <div id="dg-toleranceDown" style="font-size:50%;margin-top:2px">                
                   <label style="width:25px;height:13px;line-height:13px;display:inline-block;overflow:hidden;">
                        <input style="float:left;" name="toleranceDownRadio" type="radio" value="+" />
                        <span style="float:left;">+</span>
                    </label>
                    
                    <label style="width:23px;height:13px;line-height:13px;display:inline-block;overflow:hidden;">
                        <input style="float:left;" name="toleranceDownRadio" type="radio" value="-" />
                        <span style="float:left">-</span>
                    </label>

                    <input type="number" title="下差" placeholder="下差" style="width:60px" />                
                </div>
            </div>
            <div style="clear:both" ></div>

        </div>
    </div>

    <div id="dgRoughness" style="display:none" >
        <div style="position:relative;font-size:20px;margin:3px 0 0 3px"> 
            <img id="dgRoughnessBase" src='' /> 
            <input name="baseValue" type="number"  value="" style="position:absolute;top:30px;left:15px;width:50px" />
            <div id="dgRoughnessUp" style="display:none;position:absolute;top:0px;left:83px;font-size:50%;margin-left:0px;">
                <label style="width:25px;height:13px;line-height:13px;display:inline-block;overflow:hidden;">
                    <input style="float:left;" name="roughnessUpRadio" type="radio" value="+" />
                    <span style="float:left;">+</span>
                </label>
                    
                <label style="width:23px;height:13px;line-height:13px;display:inline-block;overflow:hidden;">
                    <input style="float:left;" name="roughnessUpRadio" type="radio" value="-" />
                    <span style="float:left">-</span>
                </label>
                <input name="upValue" type="number" title="上差" placeholder="上差" style="width:60px" />
            </div>
            <div id="dgRoughnessDown" style="display:none;position:absolute;top:25px;left:83px;font-size:50%;margin-top:2px">                
                <label style="width:25px;height:13px;line-height:13px;display:inline-block;overflow:hidden;">
                    <input style="float:left;" name="roughnessDownRadio" type="radio" value="+" />
                    <span style="float:left;">+</span>
                </label>
                <label style="width:23px;height:13px;line-height:13px;display:inline-block;overflow:hidden;">
                    <input style="float:left;" name="roughnessDownRadio" type="radio" value="-" />
                    <span style="float:left">-</span>
                </label>
                <input name="downValue" type="number" title="下差" placeholder="下差" style="width:60px" />                
            </div>
        </div> 
        <div id='dgRoughnessValue' style="font-size:14px;position:relative;margin-top:-1000px;min-width:65px;display:inline-block;height:54px;">
            <img style="position:absolute;left:0px;bottom:0px" height="50" width=65" src='' />
            <div style="position:absolute;left:0px;width:37px;text-align:center;top:15px" id="dgRhBaseValue"></div>
            <div style="position:absolute;top:-2px;left:39px" id="dgRhUpValue" ></div>
            <div style="position:absolute;top:14px;left:39px" id="dgRhDownValue" ></div>
        </div>
    </div> 

    <div id="dgShapeTolerance" >
        <div class="shapeToleranceItem" style="">
            <div class="shapeSymBox" style="width:60px;float:left;margin:0 5px">
                <fieldset style="border-style:dashed;height:60px">
                    <legend>符号</legend>                   
                    <button class="shapeSym easyui-linkbutton" data-options="width:40,height:30"></button>   
                </fieldset>
            </div>
            <div class="shapeTolerance1Box" style="width:180px;float:left;margin:0 5px;">
                <fieldset style="border-style:dashed;height:60px">
                    <legend>公差 1</legend>
                    <div>
                    <select>
                        <option value=""></option>
                        <option value="Φ">Φ</option>
                    </select>
                    <input type="number" style="width:80px" />
                    <select>
                        <option value=""></option>
                        <option value="" title="最大包容条件">M</option>
                        <option value="" title="最小包容条件">L</option>
                        <option value="" title="不考虑特征尺寸">S</option>
                    </select>                    
                </div>  
                </fieldset>
                
            </div>
            <div class="shapeTolerance2Box" style="width:180px;float:left;margin:0 5px;height:60px">
                <fieldset style="border-style:dashed;height:60px">
                    <legend>公差 2</legend>
                    <div>
                    <select>
                        <option value=""></option>
                        <option value="Φ">Φ</option>
                    </select>
                    <input type="number" style="width:80px" />
                    <select>
                        <option value=""></option>
                        <option value="" title="最大包容条件">M</option>
                        <option value="" title="最小包容条件">L</option>
                        <option value="" title="不考虑特征尺寸">S</option>
                    </select>                    
                </div>  
                </fieldset>
            </div>
            <div class="shapebenchmark1Box" style="width:130px;float:left;margin:0 5px;height:60px">
                <fieldset style="border-style:dashed;height:60px">
                    <legend>基准 1</legend>
                    <input type="number"  value="" style="width:60px" />
                    <select style="width:50px">
                        <option value=""></option>
                        <option value="" title="最大包容条件">M</option>
                        <option value="" title="最小包容条件">L</option>
                        <option value="" title="不考虑特征尺寸">S</option>
                    </select>   
                </fieldset>
                
            </div> 
             <div class="shapebenchmark2Box" style="width:130px;float:left;margin:0 5px;height:60px">
                <fieldset style="border-style:dashed;height:60px">
                    <legend>基准 2</legend>
                    <input type="number"  value="" style="width:60px" />
                    <select style="width:50px">
                        <option value=""></option>
                        <option value="" title="最大包容条件">M</option>
                        <option value="" title="最小包容条件">L</option>
                        <option value="" title="不考虑特征尺寸">S</option>
                    </select>   
                </fieldset>
            </div> 
             <div class="shapebenchmark3Box" style="width:130px;float:left;margin:0 5px;height:60px">
                <fieldset style="border-style:dashed;height:60px">
                    <legend>基准 3</legend>
                    <input type="number"  value="" style="width:60px" />
                    <select style="width:50px">
                        <option value=""></option>
                        <option value="" title="最大包容条件">M</option>
                        <option value="" title="最小包容条件">L</option>
                        <option value="" title="不考虑特征尺寸">S</option>
                    </select>   
                </fieldset>
            </div> 
        </div>
        <div style="clear:both" ></div>
        <div class="shapeToleranceItem" style="">
            <div class="shapeSymBox" style="width:60px;float:left;margin:0 5px">
                <fieldset style="border-style:dashed;height:60px">
                    <legend>符号</legend>                   
                    <button class="shapeSym easyui-linkbutton" data-options="width:40,height:30"></button>   
                </fieldset>
            </div>
            <div class="shapeTolerance1Box" style="width:180px;float:left;margin:0 5px;">
                <fieldset style="border-style:dashed;height:60px">
                    <legend>公差 1</legend>
                    <div>
                    <select>
                        <option value=""></option>
                        <option value="Φ">Φ</option>
                    </select>
                    <input type="number" style="width:80px" />
                    <select>
                        <option value=""></option>
                        <option value="" title="最大包容条件">M</option>
                        <option value="" title="最小包容条件">L</option>
                        <option value="" title="不考虑特征尺寸">S</option>
                    </select>                    
                </div>  
                </fieldset>
                
            </div>
            <div class="shapeTolerance2Box" style="width:180px;float:left;margin:0 5px;height:60px">
                <fieldset style="border-style:dashed;height:60px">
                    <legend>公差 2</legend>
                    <div>
                    <select>
                        <option value=""></option>
                        <option value="Φ">Φ</option>
                    </select>
                    <input type="number" style="width:80px" />
                    <select>
                        <option value=""></option>
                        <option value="" title="最大包容条件">M</option>
                        <option value="" title="最小包容条件">L</option>
                        <option value="" title="不考虑特征尺寸">S</option>
                    </select>                    
                </div>  
                </fieldset>
            </div>
            <div class="shapebenchmark1Box" style="width:130px;float:left;margin:0 5px;height:60px">
                <fieldset style="border-style:dashed;height:60px">
                    <legend>基准 1</legend>
                    <input type="number"  value="" style="width:60px" />
                    <select style="width:50px">
                        <option value=""></option>
                        <option value="" title="最大包容条件">M</option>
                        <option value="" title="最小包容条件">L</option>
                        <option value="" title="不考虑特征尺寸">S</option>
                    </select>   
                </fieldset>
                
            </div> 
             <div class="shapebenchmark2Box" style="width:130px;float:left;margin:0 5px;height:60px">
                <fieldset style="border-style:dashed;height:60px">
                    <legend>基准 2</legend>
                    <input type="number"  value="" style="width:60px" />
                    <select style="width:50px">
                        <option value=""></option>
                        <option value="" title="最大包容条件">M</option>
                        <option value="" title="最小包容条件">L</option>
                        <option value="" title="不考虑特征尺寸">S</option>
                    </select>   
                </fieldset>
            </div> 
             <div class="shapebenchmark3Box" style="width:130px;float:left;margin:0 5px;height:60px">
                <fieldset style="border-style:dashed;height:60px">
                    <legend>基准 3</legend>
                    <input type="number"  value="" style="width:60px" />
                    <select style="width:50px">
                        <option value=""></option>
                        <option value="" title="最大包容条件">M</option>
                        <option value="" title="最小包容条件">L</option>
                        <option value="" title="不考虑特征尺寸">S</option>
                    </select>   
                </fieldset>
            </div> 
        </div>
        <div id="dgShapeSym" style="display:none">
            <button id="Button33" title="位置度" class="easyui-linkbutton" style="margin:5px"
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button34" title="同轴度" class="easyui-linkbutton" style="margin:5px;padding-top:4px"
                    data-options="width:40,height:30"><span class="btnOfText" style="font-size:40px;color:black" >◎</span></button>

                <button id="Button35" title="对称度" class="easyui-linkbutton" style="margin:5px"
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button36" title="平行度" class="easyui-linkbutton" style="margin:5px"                   
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button37" title="垂直度" class="easyui-linkbutton" style="margin:5px"
                    data-options="width:40,height:30"><span class="btnOfText" style="font-size:30px;color:black" >⊥</span></button>
                <button id="Button38" title="倾斜度" class="easyui-linkbutton" style="margin:5px"
                    data-options="width:40,height:30"><span class="btnOfText" style="font-size:30px;color:black" >∠</span></button>
                <button id="Button39" title="圆柱度" class="easyui-linkbutton" style="margin:5px"                   
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button40" title="平面度" class="easyui-linkbutton" style="margin:5px"                   
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button41" title="圆度" class="easyui-linkbutton" style="margin:5px"
                    data-options="width:40,height:30"><span class="btnOfText" style="font-size:40px;color:black" >○</span></button>
                <button id="Button42" title="直线度" class="easyui-linkbutton" style="margin:5px"
                    data-options="width:40,height:30"><span class="btnOfText" style="font-size:20px;color:black" >—</span></button>
                <button id="Button43" title="面轮廓" class="easyui-linkbutton" style="margin:5px"                   
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button44" title="线轮廓" class="easyui-linkbutton" style="margin:5px"                   
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button45" title="圆跳动" class="easyui-linkbutton" style="margin:5px"                   
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>

                <button id="Button46" title="全跳动" class="easyui-linkbutton" style="margin:5px"                   
                    data-options="width:40,height:30"><img width="20" height="20" style="margin-bottom:2px" src="" /></button>
        </div>

         <div style="clear:both" ></div>
        <div id="dgShapeToleranceValue" style="float:left">
                                     
        </div>
    </div>
</body>
</html>
<script src="/InSiteWebApplication/Scripts/json2.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/jquery.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Scripts/CustomPageJs/CustomCommon.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Scripts/html2canvas.js" type="text/javascript"></script>
<script type="text/javascript">
    var page = {
        rootPath: getRootPath(), //网站根路径
        ajaxUrl: getRootPath() + "/Ashx/TestHandler.ashx",
        //初始化页面
        init: function () {
            page.bind();
        },
        //页面事件绑定
        bind: function () {
            $("#btnInserImg").on('click', function () {
                page.visibleCursor('dvEditText');
                document.execCommand('insertHTML', false, '<img width="200" height="50" src="">');

            });
            $("#btnVCursor").on('click', function () {
                page.visibleCursor('dvEditText');
            });
            $("#btnZF").on('click', function () {
                //$('#dvEditText').append(page.createUpDownMark($(this).text(), 15, '', 1, '-', 0.5));
                //page.visibleCursor('dvEditText');
                page.openUpDownModule($(this).text());
            });
            $("#btnZJ").on('click', function () {
                page.openUpDownModule($(this).text());
            });
            $("#btnR").on('click', function () {
                page.openUpDownModule($(this).text());
            });
            $("#btnSR").on('click', function () {
                page.openUpDownModule($(this).text());
            });
            $("#btnM").on('click', function () {
                page.openUpDownModule($(this).text());
            });
            //粗糙度
            $("#btnRoughness0").on('click', function () {
                $("#dgRoughnessUp").css('display', 'none');
                $("#dgRoughnessDown").css('display', 'none');
                var base64 = $(this).css('background-image').replace("url(", '').replace(")", '').trim('\"');
                page.openRoughnessModule(base64, 0);
            });
            $("#btnRoughness1").on('click', function () {
                $("#dgRoughnessUp").css('display', 'block');
                $("#dgRoughnessDown").css('display', 'block');
                var base64 = $(this).css('background-image').replace("url(", '').replace(")", '').trim('\"');
                page.openRoughnessModule(base64, 1);
            });
            $("#btnRoughness2").on('click', function () {
                $("#dgRoughnessUp").css('display', 'none');
                $("#dgRoughnessDown").css('display', 'none');
                var base64 = $(this).css('background-image').replace("url(", '').replace(")", '').trim('\"');
                page.openRoughnessModule(base64, 2);
            });
            //特殊符号
            $("#dvSymBol button").on('click', function () {
                page.openSymBol(this);
            });
            //形位公差
            $("#dvShapeTolerance button").on('click', function () {
                page.openShapeToleranceModule(this);
            });
            //形位公差组件里的符号
            $(".shapeToleranceItem .shapeSym").on('click', function () {
                page.openShapeSym(this);
            });
        }
        //将光标置为id容器里的元素最后
        , visibleCursor: function (id) {
            var range = document.createRange();
            range.selectNodeContents(document.getElementById(id));
            range.collapse(false);
            var sel = window.getSelection();
            sel.removeAllRanges();  // 清空所有 Range 对象
            sel.addRange(range); // 恢复保存的 Range
        }
        //创建基准值带上下角标
        , createUpDownMark: function (basePrefix, base, upPrefix, upValue, downPrefix, downValue) {
            var strHtml = '';
            strHtml += '<div contenteditable="true" style="display:inline-block;position:relative;font-size:20px;">';
            strHtml += '<div  style="float:left;padding-top:4px;font-size:100%" >' + basePrefix + base.toString() + '</div>'
            strHtml += '<div style="float:left" >';
            //上标
            strHtml += '<div style="font-size:50%;margin-left:0px;height:16px">';
            strHtml += '<span style="width:10px;display:inline-block;text-align:center" >'
            if (!isNullOrWhiteSpaceStr(upPrefix) || !isNullOrWhiteSpaceStr(upValue)) {
                if (!isNullOrWhiteSpaceStr(upPrefix)) {
                    strHtml += upPrefix.toString();
                }
                strHtml += '</span>';
                if (!isNullOrWhiteSpaceStr(upValue)) {
                    strHtml += upValue.toString();
                }
                strHtml += '</div>';
            } else {
                strHtml += '</span></div>';
            }
            //下标
            strHtml += '<div style="font-size:50%;margin-left:0px">';
            strHtml += '<span style="width:10px;display:inline-block;text-align:center" >'
            if (downPrefix != null || downValue != null) {
                if (!isNullOrWhiteSpaceStr(downPrefix)) {
                    strHtml += downPrefix.toString();
                }
                strHtml += '</span>';
                if (!isNullOrWhiteSpaceStr(downValue)) {
                    strHtml += downValue.toString();
                }
                strHtml += '</div>';
            } else {
                strHtml += '</span></div>';
            }
            strHtml += '</div></div>';
            strHtml += "&nbsp;";
            return strHtml;
        }
        , //清空带上下角标的组件
        clearUpDownMark: function () {
            $('#dg-toleranceBase input').val('');
            $('#dg-toleranceUp input').val('');
            $('#dg-toleranceUp :checked').removeAttr("checked");
            $('#dg-toleranceDown input').val('');
            $('#dg-toleranceDown :checked').removeAttr("checked");
        }
        , //打开带上下角标的组件
        openUpDownModule: function (baseType) {
            $('#dg-toleranceBase span').text(baseType);

            $('#dgTolerance').dialog({
                title: '尺寸公差',
                width: 250,
                height: 170,
                closed: false,
                cache: false,
                modal: true,
                content: '',
                buttons: [{
                    text: '确定',
                    iconCls: 'icon-ok',
                    handler: function () {
                        var baseVal = $('#dg-toleranceBase input').val();
                        var upMark = $('#dg-toleranceUp input[type="radio"]:checked').val();
                        var upVal = $('#dg-toleranceUp input[type="number"]').val();

                        var downMark = $('#dg-toleranceDown input[type="radio"]:checked').val();
                        var downVal = $('#dg-toleranceDown input[type="number"]').val();

                        if (isNullOrWhiteSpaceStr(baseVal)) {
                            displayMessage("请填写基准值");
                            return;
                        }
                        if (!isNullOrWhiteSpaceStr(upMark) && isNullOrWhiteSpaceStr(upVal)) {
                            displayMessage("请填写上差值");
                            return;
                        }
                        if (!isNullOrWhiteSpaceStr(downMark) && isNullOrWhiteSpaceStr(downVal)) {
                            displayMessage("请填写下差值");
                            return;
                        }


                        var strHtml = page.createUpDownMark($('#dg-toleranceBase span').text(), baseVal,
                            upMark, upVal, downMark, downVal);
                        $('#dvEditText').append(strHtml);
                        //清空并关闭
                        page.clearUpDownMark();
                        page.visibleCursor('dvEditText');
                        $('#dgTolerance').dialog('close');
                    }
                }, {
                    text: '清空',
                    handler: function () {
                        page.clearUpDownMark();
                    }
                }],
                onClose: function () {
                    page.clearUpDownMark();
                }
            });
        }
        , //打开粗糙度组件
        openRoughnessModule: function (base64, type) {
            page.visibleCursor('dvEditText');
            $("#dgRoughnessBase").attr('src', base64);
            $('#dgRoughness').dialog({
                title: '粗糙度',
                width: 250,
                height: 200,
                closed: false,
                cache: false,
                modal: true,
                content: '',
                buttons: [{
                    text: '确定',
                    iconCls: 'icon-ok',
                    handler: function () {
                        page.clearRoughness(false, true);
                        var baseVal = $('#dgRoughness input[name="baseValue"]').val();
                        var upMark = $('#dgRoughnessUp input[type="radio"]:checked').val();
                        var upVal = $('#dgRoughnessUp input[name="upValue"]').val();
                        var downMark = $('#dgRoughnessDown input[type="radio"]:checked').val();
                        var downVal = $('#dgRoughnessDown input[name="downValue"]').val();
                        if (isNullOrWhiteSpaceStr(baseVal)) {
                            displayMessage("请填写基准值");
                            return;
                        }

                        //填入实际值
                        $("#dgRoughnessValue img").attr('src', base64);
                        if (type == 1) {
                            $("#dgRoughnessValue img").attr('width', 72);
                        } else {
                            $("#dgRoughnessValue img").attr('width', 65);
                        }
                        $('#dgRhBaseValue').text(baseVal);
                        if ($("#dgRoughnessUp").css('display') == 'block') {
                            if (!isNullOrWhiteSpaceStr(upMark) && isNullOrWhiteSpaceStr(upVal)) {
                                displayMessage("请填写上差值");
                                return;
                            }
                            if (!isNullOrWhiteSpaceStr(upVal)) {
                                if (upMark != null)
                                    $("#dgRhUpValue").text(upMark + upVal);
                                else
                                    $("#dgRhUpValue").text(upVal);
                            }
                        }
                        if ($("#dgRoughnessDown").css('display') == 'block') {
                            if (!isNullOrWhiteSpaceStr(downMark) && isNullOrWhiteSpaceStr(downVal)) {
                                displayMessage("请填写下差值");
                                return;
                            }
                            if (!isNullOrWhiteSpaceStr(downVal)) {
                                if (downMark != null)
                                    $("#dgRhDownValue").text(downMark + downVal);
                                else
                                    $("#dgRhDownValue").text(downVal);
                            }
                        }
                        //调整结果区域的宽度
                        var addWidth = 0;
                        if ($("#dgRhUpValue").width() > 26) {
                            addWidth = $("#dgRhUpValue").width() - 26;
                        }
                        if ($("#dgRhDownValue").width() - 26 > addWidth) {
                            addWidth = $("#dgRhDownValue").width() - 26;
                        }
                        $('#dgRoughnessValue').css('width', (parseInt($('#dgRoughnessValue').css('min-width')) + addWidth).toString())
                        //return;
                        //生成粗糙度img并加到编辑框内
                        var content = document.getElementById('dgRoughnessValue');
                        html2canvas(content, {
                            useCORS: true, //允许跨域
                            onrendered: function (canvas) {
                                var _img = '<img width="60" height="52" src="';
                                _img += canvas.toDataURL();
                                _img += '"/>';
                                //prompt("", _img);
                                document.execCommand('insertHTML', false, _img);
                            }
                        });
                        //return;
                        //清空并关闭
                        page.clearRoughness(true, true);
                        page.visibleCursor('dvEditText');
                        $('#dgRoughness').dialog('close');
                    }
                }, {
                    text: '清空',
                    handler: function () {
                        page.clearRoughness(true, true);
                    }
                }],
                onClose: function () {
                    page.clearRoughness(true, true);
                }
            });
        }
        , //清空粗糙度组件
        clearRoughness: function (isClearEdit, isClearRealVal) {
            if (isClearEdit) {
                $("#dgRoughness input[type='number']").val('');
                $('#dgRoughness :checked').removeAttr("checked");
            }
            if (isClearRealVal) {
                $('#dgRoughnessValue>div').text('');
                $('#dgRoughnessValue>img').attr('src', '');
            }
        }
        , //特殊符号
        openSymBol: function (dom) {
            page.visibleCursor('dvEditText');
            document.execCommand('insertHTML', false, $(dom).text());
        },
        //初始化形位公差
        initShapeToleranceModule:function(){
            //清空值
            $("#dgShapeTolerance .shapeToleranceItem input").val('');
            $("#dgShapeTolerance .shapeToleranceItem select").val('');
            $("#dgShapeTolerance .shapeToleranceItem .shapeSym").html('');
            //初始化值区域                        
            $("#dgShapeToleranceValue").html('');
        }
        //生成形位公差值
        ,stItemActualHtml:function(_item,_itemValue){
            var img = $(_item).find(".shapeSymBox .shapeSym .l-btn-text").html();
                        //公差1
                        var st1Select = $(_item).find(".shapeTolerance1Box select");
                        var st1Input = $(_item).find(".shapeTolerance1Box input");
                        var st1 = $(st1Select).eq(0).find("option:selected").text() + $(st1Input).eq(0).val() + $(st1Select).eq(1).find("option:selected").text();
                        //公差2
                        st1Select = $(_item).find(".shapeTolerance2Box select");
                        st1Input = $(_item).find(".shapeTolerance2Box input");
                        var st2 = $(st1Select).eq(0).find("option:selected").text() + $(st1Input).eq(0).val() + $(st1Select).eq(1).find("option:selected").text();
                        //基准1
                        var mkSelect = $(_item).find(".shapebenchmark1Box select");
                        var mkInput = $(_item).find(".shapebenchmark1Box input");
                        var mk1 = $(mkInput).eq(0).val() + $(mkSelect).eq(0).find("option:selected").text();
                        //基准2
                        mkSelect = $(_item).find(".shapebenchmark2Box select");
                        mkInput = $(_item).find(".shapebenchmark2Box input");
                        var mk2 = $(mkInput).eq(0).val() + $(mkSelect).eq(0).find("option:selected").text();
                        //基准3
                        mkSelect = $(_item).find(".shapebenchmark3Box select");
                        mkInput = $(_item).find(".shapebenchmark3Box input");
                        var mk3 = $(mkInput).eq(0).val() + $(mkSelect).eq(0).find("option:selected").text();

                        $(_itemValue).find(".dgStV-sym").html(img);

                        var valHtml = '';
                        //公差1
                        if (!(st1 == '' || st1 == null || st1 == undefined)) {
                            valHtml = `<div class="dgStV-st1" style="font-size:18px;display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;padding:0 5px;
                             border:1px solid #000">`;
                            valHtml+=st1
                            valHtml+="</div>";
                            $(_itemValue).append(valHtml);
                        }    
                        //公差2                    
                        if (!(st2 == '' || st2 == null || st2 == undefined)) {
                            valHtml = `<div class="dgStV-st2" style="font-size:18px;display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;padding:0 5px;
                             border:1px solid #000">`;
                            valHtml+=st2
                            valHtml+="</div>";
                            $(_itemValue).append(valHtml);
                        }
                        //基准1
                        if (!(mk1 == '' || mk1 == null || mk1 == undefined)) {
                             valHtml = `<div class="dgStV-mar1" style="font-size:18px;display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;padding:0 5px;
                             border:1px solid #000">`;
                            valHtml+=mk1
                            valHtml+="</div>";
                            $(_itemValue).append(valHtml);
                        }
                         //基准2
                        if (!(mk2 == '' || mk2 == null || mk2 == undefined)) {
                             valHtml = `<div class="dgStV-mar1" style="font-size:18px;display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;padding:0 5px;
                             border:1px solid #000">`;
                            valHtml+=mk2
                            valHtml+="</div>";
                            $(_itemValue).append(valHtml);
                        }
                        //基准3
                        if (!(mk3 == '' || mk3 == null || mk3 == undefined)) {
                             valHtml = `<div class="dgStV-mar1" style="font-size:18px;display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;padding:0 5px;
                             border:1px solid #000">`;
                            valHtml+=mk3
                            valHtml+="</div>";
                            $(_itemValue).append(valHtml);
                        }
        }
        //形位公差
        ,openShapeToleranceModule: function (btnObj) {
           
            $('.shapeToleranceItem .shapeSym').eq(0).html($(btnObj).html());

            $('#dgShapeTolerance').dialog({
                title: '行位公差',
                width: 1000,
                height: 400,
                closed: false,
                cache: false,
                modal: true,
                content: '',
                buttons: [{
                    text: '确定',
                    iconCls: 'icon-ok',
                    handler: function () {
                         page.visibleCursor('dvEditText');
                        //初始化值区域                        
                        $("#dgShapeToleranceValue").html(`
                            <div class="dgStV-item" style="display:flex;">
                            <div class="dgStV-sym" style="display:flex;justify-content:center;align-items:center;width:40px;height:40px;border:1px solid #000;overflow:hidden">                    
                                </div>                
                            </div>
                        `);
                        //循环
                        var item = $("#dgShapeTolerance .shapeToleranceItem");
                        var itemValue = $("#dgShapeTolerance #dgShapeToleranceValue .dgStV-item");

                        var _item = $(item).eq(0); //第一个形位公差
                        var _itemValue=$(itemValue).eq(0);//形位公差值

                        page.stItemActualHtml(_item,_itemValue);

                        _item = $(item).eq(1); //第一个形位公差

                        if($(_item).find(".shapeSymBox .shapeSym .l-btn-text").children().length>0){
                            $("#dgShapeToleranceValue").append(`
                                <div class="dgStV-item" style="display:flex;">
                                <div class="dgStV-sym" style="display:flex;justify-content:center;align-items:center;width:40px;height:40px;border:1px solid #000;overflow:hidden">                    
                                    </div>                
                                </div>
                            `);                            
                            _itemValue=$("#dgShapeTolerance #dgShapeToleranceValue .dgStV-item").eq(1);//形位公差值
                            page.stItemActualHtml(_item,_itemValue);
                        }

                        var content = document.getElementById('dgShapeToleranceValue');
                        html2canvas(content, {
                            useCORS: true, //允许跨域
                            onrendered: function (canvas) {
                                var _img = '<img width="" height="40" src="';
                                _img += canvas.toDataURL();
                                _img += '"/>';

                                document.execCommand('insertHTML', false, _img);
                                //$('#dvEditText').append(_img);
                            }
                        });
                        
                        //清空并关闭
                        $('#dgShapeTolerance').dialog('close');
                        page.initShapeToleranceModule();
                        page.visibleCursor('dvEditText');
                    }
                }, {
                    text: '清空',
                    handler: function () {
                        page.initShapeToleranceModule();
                    }
                }],
                onClose: function () {
                    page.initShapeToleranceModule();
                }
            });
        }
        //形位公差组件里的符号更改
        , openShapeSym: function (btnObj) {

            $('#dgShapeSym').dialog({
                title: '更改符号',
                width: 350,
                height: 200,
                closed: false,
                cache: false,
                modal: true,
                content: '',
                buttons: [],
                onBeforeOpen: function () {
                    $('#dgShapeSym button').off('click');
                    $('#dgShapeSym button').on('click', function () {
                        $(btnObj).html($(this).html());
                        $('#dgShapeSym').dialog('close');
                    });
                },
                onClose: function () {

                }
            });
        }
    }
    $(function () {
        page.init();
    });
</script>